<template>
  <div class="setting-tools" ref="target" :style="{ left: `${x}px`, top: `${y}px` }">
    <div v-show="expandTools" class="setting-tools-expand">
      <div class="setting-tools-header" ref="headerRef">
        <div v-for="(item, index) in settingTools" :key="index" class="tool-item"
          :class="{ active: activeToolIndex === index }" @click="changeToolActive(index)">
          <span>{{ item.label }}</span>
        </div>
        <div class="setting-tools-header-refresh" @click="handleRefresh">
          <i class="iconfont">&#xe675;</i>
        </div>
        <div class="setting-tools-header-close" @click="closeTools">
          <i class="iconfont">&#xe8e7;</i>
        </div>
      </div>
      <div class="setting-tools-body">
        <!-- 模块标签下的内容 -->
        <el-scrollbar height="684px">
          <div class="setting-tools-body-container config-container">
            <!-- 通用类编辑 -->
            <div v-if="expandTools && editorForm.type === 'common'">
              <CommonForm :key="formKey"></CommonForm>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, inject } from 'vue'
import { useDraggable } from '@vueuse/core'
import { useStore } from 'vuex'
import CommonForm from './CommonForm.vue'

const store = useStore()
const editorVariable = computed(() => store.state.template.editorVariable)
const editorForm = ref({})
const formKey = ref()
watch(editorVariable, () => {
  if(!editorVariable.value) {
    editorForm.value = {}
    formKey.value = new Date().getTime()
    return
  }
  editorForm.value = structuredClone(editorVariable.value)
  formKey.value = new Date().getTime()
})
// 使用useDraggable实现元素自由拖拽
const target = ref(null)
const initialValue = { x: 1000, y: 100 }
const { x, y } = useDraggable(target, {
  initialValue,
  // 只允许header和shrink区域拖动
  onStart: (pos, event) => {
    const header = target.value.querySelector('.setting-tools-header')
    const isHeaderOrChild = header?.contains(event.target)
    if (!isHeaderOrChild) {
      return false
    }
  },
  // 限制拖动范围在视窗内
  onMove: (pos) => {
    const { width, height } = target.value.getBoundingClientRect()
    pos.x = Math.min(Math.max(0, pos.x), window.innerWidth - width)
    pos.y = Math.min(Math.max(0, pos.y), window.innerHeight - height)
  }
})

// 工具栏展开/收起
const expandTools = computed({
  get: () => store.state.template.showConfigPanel,
  set: (val) => {
    store.commit('template/SET_SHOW_CONFIG_PANEL', val)
  }
})
const closeTools = () => {
  expandTools.value = false
}

// 工具栏配置
const settingTools = reactive([
  { label: '通用设置', icon: '&#xe626;' },
  // { label: '动画设置', icon: '&#xe8c7;' }
])

// 切换工具栏
const activeToolIndex = ref(0)
const activeModuleTab = ref('component')


const changeToolActive = (index, tab) => {
  if (tab) {
    activeModuleTab.value = tab
  }
  expandTools.value = true
  activeToolIndex.value = index
}

// 刷新
const { updateComponent } = inject('design')
const handleRefresh = () => {
  const {componentId, componentKey, componentVariable } = store.state.template
  updateComponent(componentId, componentKey, componentVariable)
}
</script>

<style lang="scss" scoped>
.setting-tools {
  position: fixed;
  z-index: 2001;

  // 工具箱展开式
  .setting-tools-expand {
    display: flex;
    flex-direction: column;
    width: 350px;
    height: 742px;
    border-radius: 6px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: all 0.3s;

    .setting-tools-header {
      display: flex;
      flex-shrink: 0;
      flex-wrap: nowrap;
      position: relative;
      align-items: center;
      width: 100%;
      height: 58px;
      background-color: #5a75d5;

      .tool-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        height: 100%;
        color: #d2d9f4;
        font-size: 14px;
        cursor: pointer;

        &.active {
          color: $white;
          background-color: #6781de;
        }
      }
      .setting-tools-header-refresh,
      .setting-tools-header-close {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        text-align: center;
        background: #3f5dc7;
        cursor: pointer;

        i {
          font-size: 14px;
          font-weight: 600;
          color: #fff;
        }
      }
      .setting-tools-header-refresh {
        right: 40px;

        i {
          font-size: 12px;
        }
      }
    }

    .setting-tools-body {
      flex-grow: 1;
      background-color: $white;

      .config-container {
        padding: 20px;
      }
    }
  }
}
</style>